
<template>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/artcile">文章管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>文章列表</el-breadcrumb-item>
      </el-breadcrumb>

<!--表格内容 -->
      <el-card class="box-card" style="margin-top: 15px">
        <el-button type="primary" @click="add()">添加</el-button>
<!--        搜索查询-->
        <el-input style="width: 220px"
            placeholder="请输入内容"
            clearable
            v-model="param.key">
        </el-input>
        <el-button type="info" icon="el-icon-search" @click="search()">搜索</el-button>
        <el-table :data="tableData" style="width: 100%;margin-top: 15px">
          <el-table-column
              prop="create_time"
              label="日期"
              width="180">
          </el-table-column>
          <el-table-column
              prop="title"
              label="标题"
              width="180">
          </el-table-column>
          <el-table-column
              prop="sort"
              label="排序">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
<!--              {{scope.row}}}-->
              <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 200]"
            :page-size="param.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

<!--        添加的表单-->
        <el-dialog
            title="添加表单"
            :visible.sync="addDialogdialogVisible"
            width="30%">
          <el-form ref="form" :model="addForm" label-width="80px">
            <el-form-item label="标题">
              <el-input v-model="addForm.title"></el-input>
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-model="addForm.sort"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-radio v-model="addForm.status" :label="1">启用</el-radio>
              <el-radio v-model="addForm.status" :label="2">禁用</el-radio>
            </el-form-item>
            <el-form-item label="内容">
              <el-input type="textarea" v-model="addForm.content"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogdialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addSave()">确 定</el-button>
          </span>
        </el-dialog>
<!--        编辑表单-->
        <el-dialog
            title="编辑表单"
            :visible.sync="editDialogdialogVisible"
            width="30%">
          <el-form ref="form" :model="editForm" label-width="80px">
            <el-form-item label="标题">
              <el-input v-model="editForm.title"></el-input>
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-model="editForm.sort"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-radio v-model="editForm.status" :label="1">启用</el-radio>
              <el-radio v-model="editForm.status" :label="2">禁用</el-radio>
            </el-form-item>
            <el-form-item label="内容">
              <el-input type="textarea" v-model="editForm.content"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogdialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editSave()">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
</template>

<script>
import {create} from "axios";

export default {
  data() {
    return {
      editForm:{
        title:'',
        content:'',
        sort:0,
        status:1
      },
      addForm:{
        title:'',
        content:'',
        sort:0,
        status:1
      },
      addDialogdialogVisible:false,
      editDialogdialogVisible:false,
      param:{
        key:'',
        page: 1,
        limit: 10
      },
      total: 0,
      tableData: [],
      currentPage: 1
    }
  },
  created()
  {
    this.getlist()
  },
  methods:{
    edit($info){
      // 打开Dialog弹框
      this.editDialogdialogVisible=true
      //将数据赋值
      this.editForm.id = $info.id
      this.editForm.title = $info.title
      this.editForm.content = $info.content
      this.editForm.sort = $info.sort
      this.editForm.status = $info.status
    },
    async editSave(){
      // 关闭Dialog弹框
      this.editDialogdialogVisible = false
      //发送数据
      const {data:res} =await this.$ajax.post('http://121.4.96.134:8086/api/Artcile/save',this.editForm)
      if (res.code == 200) {
        this.$msg.success(res.msg)
        // 重新请求查询
        this.getlist()
        // 将数据置空
        this.addForm.title = ''
        this.addForm.content = ''
        this.addForm.status = ''
        this.addForm.id = ''
      }else{
        this.$msg.error(res.msg)
      }
    },
    add(){
      // 打开Dialog弹框
      this.addDialogdialogVisible=true
    },
    async addSave() {
      // 关闭Dialog弹框
      this.addDialogdialogVisible = false
      //发送数据
      const {data:res} =await this.$ajax.post('http://121.4.96.134:8086/api/Artcile/save',this.addForm)
      if (res.code == 200) {
        this.$msg.success(res.msg)
        // 重新请求查询
        this.getlist()
        // 将数据置空
        this.addForm.title = ''
        this.addForm.content = ''
      }else{
        this.$msg.error(res.msg)
      }
    },
    search(){
      this.getlist()
    },

    handleSizeChange(val){
      console.log(val);
      this.param.limit=val;
      this.getlist()
    },
    handleCurrentChange(val){
      console.log(val);
      this.param.page=val;
      this.getlist()
    },
    async getlist() {
     const {data:res} =await this.$ajax.get('http://121.4.96.134:8086/api/Artcile/index',{params:this.param})
     this.tableData = res.data
      this.total = res.total
      console.log(res);
    },
    async del(id){
      const {data:res} =await this.$ajax.get('http://121.4.96.134:8086/api/Artcile/delete',{params:{id:id}})
      if (res.code == 200) {
        this.$msg.success(res.msg)
        this.getlist()
      }else{
        this.$msg.error(res.msg)
      }
    }
  }
}
</script>

<style>
 .el-pagination{
   margin-top: 10px;
 }
</style>